<template>
    <div class="type-tag">
        <div class="type-tag_item" :class="[activeIndex == index ? 'item-act' : 'item-def']"
            v-for="(item, index) in list" :key="index" @click="change(item, index)">{{ item.label }}
            <div class="item-selected" v-if="activeIndex == index">✓</div>
        </div>
    </div>
</template>

<script setup lang="js">

const emits = defineEmits(["handleChange"])

defineProps({
    list: {
        type: Array,
        require: true
    },
    activeIndex: {
        type: Number,
        require: true
    }
})

// 切换类型
const change = (item, index) => {
    emits("handleChange", item, index)
}
</script>
<style scoped lang="scss">
.type-tag {
    width: vw(800);
    background: rgba(22, 175, 241, 0.18);
    border-radius: vw(9);
    padding: vh(9) vw(13);
    display: flex;
    justify-content: space-around;

    .type-tag_item {
        width: vw(105);
        height: vh(42);
        background: #245266;
        border-radius: vw(6);
        text-align: center;
        line-height: vh(42);
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: vw(16);
        color: #FFFFFF;
        cursor: pointer;
        box-sizing: border-box;
        position: relative;

        .item-selected {
            width: vw(21);
            height: vh(18);
            background: #B3DD4D;
            border-radius: vw(6) 0px vw(6) 0px;
            text-align: center;
            line-height: vh(18);
            color: #272636;
            font-size: vw(12);
            position: absolute;
            right: 0;
            bottom: 0;
        }
    }

    .item-def {
        border: none;
    }

    .item-act {
        border: 1px solid #B3DD4D;
    }
}
</style>